<template>
	<view>
		<custom title="账户管理"></custom>

		<view>
			<view style="height: 20rpx;"></view>
			

			<view @tap.stop="choose_image" class="" hover-class="click-bg" hover-start-time="50">
				<view class="item-list-box" style="">

					<view class="flex-1">修改个人头像</view>
					<image :src="user_info.avatarUrl" mode="aspectFill"
						style="width: 68rpx;height: 68rpx;margin-right: 10rpx;border-radius: 16rpx;"></image>
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>

			<view style="height: 20rpx;"></view>

			<view class="" hover-class="click-bg" hover-start-time="50" @tap.stop="open_remark">
				<view class="item-list-box">
					<view class="flex-1">昵称</view>
					<view>{{user_info.name}}</view>
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>
			<view class="" hover-class="click-bg" hover-start-time="50">
				<view class="item-list-box">
					<view class="flex-1">账号</view>
					<view>{{user_info.phone}}</view>
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>

			<view class="" hover-class="click-bg" hover-start-time="50" @tap.stop="toPage('/pages/user/password')">
				<view class="item-list-box">
					<view class="flex-1">重设密码</view>
					<view></view>
					
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>

			<!-- <view class="mt-20" hover-class="click-bg" hover-start-time="50" @tap.stop="logout">
				<view class="item-list-box">
					<view class="flex-1 color-red center">退出登录</view>

				</view>
			</view> -->

			<!-- <view @tap.stop="choose_wz" class="" hover-class="click-bg" hover-start-time="50">
				<view class="w-all ml-30 item-list-box">
					<view class="flex-1">城市</view>
					<view class="" v-if="!user_info.city" style="color:#888888;">请选择城市</view>
					<view class="" v-else>{{user_info.city}}</view>
					<view class="iconfont icon-jinru"></view>
				</view>
			</view> -->




		</view>

		<!-- 退出登录 -->
		<!-- <view style="position: fixed;left: 0;bottom: 180rpx;width: 100vw;">
			<view  style="height: 96rpx;color:#323232;" class="bg-FFFFFF flex flex-x-y fs-28">
				退出登录
			</view>
		</view> -->
		<!-- 退出登录 -->

		<!-- 修改备注 -->
		<uni-popup type="bottom" ref="remark">

			<view class="flex flex-x-center" style="height: 100vh;" @tap.stop="close_remark">
				<view @tap.stop="clear"
					style="width: 624rpx;background-color: #FFFFFF;border-radius: 16rpx;padding:36rpx 48rpx;height: 400rpx;margin-top: 380rpx;"
					class="flex flex-y flex-y-center">
					<view class="color-333333 fs-36">
						修改昵称
					</view>
					<input confirm-type="send" :adjust-position="false" v-model="remark" class="verify-text"
						placeholder="请输入昵称" placeholder-class="font" @confirm="set_remark()" :maxlength="10" />
					<view class="verify-send bg-all" @tap="set_remark()">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 修改备注 -->

		<toast ref="toast"></toast>

	</view>
</template>

<script>
	let utils = require('../../utils/util');
	export default {
		data() {
			return {
				remark: '',
			}
		},
		methods: {
			logout() {

				this.$refs.toast.open({
					desc: '确定退出登录？',
					left: '我再想想',
					right: '退出',
					success: () => {
						this.less(() => {
							this.request({
								url: '/login/loginOut',
								method: 'POST',
							}).then(res => {

								// uni.$emit('logout');
								this.vuexSet('user_info', {}, true);
								uni.setStorageSync('ACCESS_TOKEN', '');
								uni.redirectTo({
									url: '/pages/login/login'
								})

								if (getApp().globalData.CHAT && getApp().globalData.CHAT
									.CLOSE) {
									getApp().globalData.CHAT.CLOSE();
								}
							});
						})
					}
				});
				uni.setStorage({
					key: 'openid',
					data: '',
				})



			},
			choose_image() {

				utils.upload_one(url => {
					this.request({
						url: '/user/update',
						loading: true,
						data: {
							avatarUrl: url,
							name: this.user_info.name
						},
						method: 'POST',
						loading: true,
					}).then(res => {
						if (res.status == 200) {
							this.showToast('修改成功');
							this.$store.dispatch('refresh_user');
						}
					});
				});


			},
			open_remark() {
				this.remark = this.user_info.name;
				this.$refs.remark.open();
			},
			set_remark() {
				if (this.remark.length > 10) {
					this.showToast('长度不能超过10位');
					return;
				}
				this.request({
					url: '/user/update',
					loading: true,
					data: {
						name: this.remark.trim(),
						avatarUrl: this.user_info.avatarUrl,
					},
					method: 'POST',
					loading: true,
				}).then(res => {
					if (res.status == 200) {
						this.showToast('修改成功');
						this.$store.dispatch('refresh_user');
						this.close_remark();
					}
				});
			},
			close_remark() {
				this.$refs.remark.close();
			},
			choose_wz() {
				uni.showLoading({
					mask: true,
					title: '获取位置中'
				});
				let timer = setTimeout(() => {
					uni.hideLoading();
				}, 7000);
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						clearTimeout(timer);
						uni.setStorageSync('longitude', res.longitude);
						uni.setStorageSync('latitude', res.latitude);
						this.request({
							url: '/wechatLogin/getAddress',
							data: {
								lat: res.latitude,
								lng: res.longitude,
								status: 0
							},
						}).then(res => {
							if (res.status == 200 && res.data) {
								// data: {address: "北京市海淀区北四环西路66号",…}
								// address: "北京市海淀区北四环西路66号"
								// address_component: {province: "北京市", nation: "中国", city: "北京市", street: "北四环西路", district: "海淀区",…}
								// city: "北京市"
								// district: "海淀区"
								// nation: "中国"
								// province: "北京市"
								// street: "北四环西路"
								// street_number: "北四环西路66号"
								// msg: "操作成功"
								// status: 200
								// time: "2022-08-29 15:03:35"
								this.$store.dispatch('refresh_user');
							}
						});
					},
					fail: res => {
						clearTimeout(timer);
						console.log('res', res);
						if (res && res.errMsg.indexOf('频繁调用会增加电量损耗') > -1) {
							this.showToast('频繁操作，请稍后重试');
							return;
						}
						this.showToast('请打开手机定位后重试');
					},
					complete: res => {
						clearTimeout(timer);
					}
				});

			},
		}
	}
</script>

<style>
	page {
		background-color: #EEEFF3;
	}

	.item-list-box {

		border-bottom: 2rpx solid #eeeeee;
		color: #323232;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 30rpx 30rpx 30rpx 40rpx;
		line-height: 30rpx;

	}

	.verify-text {
		width: 100%;
		padding: 0 30rpx;
		font-size: 28rpx;
		line-height: 88rpx;
		border-radius: 16rpx;
		background-color: #EEEEEE;
		margin-top: 30rpx;
		text-align: justify;
		height: 88rpx;
		line-height: 88rpx;
	}

	.verify-send {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 526rpx;
		height: 88rpx;
		border-radius: 16rpx;
		color: #fff;
		font-size: 32rpx;
		margin-top: 48rpx;
		margin-top: 50rpx;
	}
</style>

